<template>
  <div class="dialog" v-show="visible">
    <div class="dialog-wrap">
      <div class="dialog-header">
        <slot name="header"></slot>
      
        <button @click="$emit('update:visible',false)">X</button>
      </div>
      <div class="dialog-body">
        <slot></slot>
      </div>
      <div class="dialog-footer">
        <slot name="footer"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'Dialog',
  // props:['visible']
  // 对于传进来的参数，最好是约束一下
  props:{
    visible:{
      type:Boolean, // 传入的类型
      required:true  // 必须要传
    }
  }
}
</script>

<style lang="less" scoped>
.dialog {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0,0,0,.3);
  .dialog-wrap {
    padding:16px;
    box-sizing: border-box;
    width: 28%;
    height: 200px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    .dialog-header {
      display: flex;
      justify-content: space-between;
      h3 {
        font-weight: 400;
        font-size:16px;
      }
      button {
        border: none;
        width: 22px;
        background-color: #fff;
        cursor: pointer;
        &:hover {
          color:#66b1ff;
        }
      }
    }
    .dialog-body {
      padding: 30px 20px;
      font-size: 16px;
      color:#666;
    }

  }
}
</style>